<style scoped lang='less'>
    .five-admin {
        .selected-search-components{
            .select-click{
                width: 25% !important;
                margin-bottom: 20px;
            }
        }
    }
</style>
<template>
    <div class="five-admin">
        <Tabs type="card">
            <Tab-pane label="图表显示">
                <div id="charname"  style="width: 900px;height:700px;"></div>
            </Tab-pane>
            <Tab-pane label="数据显示">
                <Table :context="self" :data="tableData" :columns="tableColumns" stripe border></Table>
            </Tab-pane>
        </Tabs>
    </div>
</template>
<script>
    import apiUtil from '../../assets/utils/api_util';

    export default {
        data() {
            return {
                self: this,
                tableData: [],
                charArr:[],
                tableColumns: [
                    {
                        title: '物资项名称',
                        key: 'Title',
                        align: 'center',
                        fixed: 'left',
                    },
                    {
                        title: '型号',
                        key: 'Serial',
                        align: 'center',
                    },
                    {
                        title: '规格',
                        key: 'Size',
                        align: 'center',
                    },
                    {
                        title: '厂商',
                        key: 'Vender',
                        align: 'center',
                    },
                    {
                        title: '采购源',
                        key: 'Byfrom',
                        align: 'center',
                    },
                    {
                        title: '采购源联系人',
                        key: 'Fromcontact',
                        align: 'center',
                    },
                    {
                        title: '采购源联系电话',
                        key: 'Fromphone',
                        align: 'center',
                    },
                    {
                        title: '分配的物资分类',
                        key: 'Fortype',
                        align: 'center',
                    },
                ]
            }
        },
        mounted: function () {
            this.getCharData();
        },
        components: {},
        methods: {

            getCharData:function(){
                let that = this;

                let para = {
                    listTypeName:"战救药材储备"
                };

                let params = that.$qs.stringify(para);

                this.$Loading.start();

                apiUtil.get(that,apiUtil.urls.GetSixListData, para, function (res) {
                    that.$Loading.finish();

                    that.charArr = res.Msg;
                    that.tableData = res.Msg.TableData;

                    that.drawChartWh();

                });
            },
            //生成统计图
            drawChartWh() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById("charname"));
                let that = this;

                let option = {
                    title: {
                        text: '战救药材储备',
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        data: []
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        type: 'category',
                        // data: that.charArr.TypeData
                        data: [
                            "电灯"
                        ]
                    },
                    // series: that.charArr.Data
                    series:[
                        {
                            name: "储备量",
                            type: "bar",
                            data: [
                                0
                            ]
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option, "light");
            },
        }
    }
</script>
